<template>
    <div style="position: relative;">
        <!-- 面包屑导航区域 -->
        <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item>监控管理</el-breadcrumb-item>
            <el-breadcrumb-item :to="{ path: '/service' }">监控服务列表</el-breadcrumb-item>
            <el-breadcrumb-item>后台服务页面 
                <span style="font-size: 12px; font-weight: 700; color: skyblue;">
                    <i class="el-icon-data-analysis"></i> {{this.url}}
                </span>
            </el-breadcrumb-item>
        </el-breadcrumb>

        <!-- 帮助按钮 -->
        <el-popover
            :style="`display: ${showHelpButton ? '' : 'none'};`"
            placement="bottom"
            title="可能是服务器运行问题或页面权限配置问题"
            width="550"
            trigger="click"
            content="1) 检查 grafana 服务是否正常运行，查看监听端口是否已开启监听（默认端口：3000） 2) 修改 grafana 目录下的 conf/custom.ini 配置文件，将 'allow_embedding = false' 修改为 'allow_embedding = true' 后重启 grafana 服务并重试。">
            <el-button class="helpButton" slot="reference" type="info" size="mini" plain round> 页面无法正常显示？</el-button>
        </el-popover>

        <!-- iframe区 -->
        <div :style="innerStyle">
            <iframe 
                :src="url" 
                class="iframe" 
                frameborder="0" 
                scrolling="yes">
            </iframe>
        </div>

    </div>
</template>

<script>
import { mapGetters } from 'vuex';
export default {
    data: function () {
        return {
            url: '',
            showHelpButton: false
        }
    },
    computed: {
        ...mapGetters(['getInnerSize']),
        innerStyle: function () {
            return `height: ${this.getInnerSize.height - 160}px;`;
        },
    },
    mounted: function () {
        this.url = this.$route.query.url;
        this.showHelpButton = this.url.endsWith('?kiosk');
    },
}
</script>

<style lang="less" scoped>
    .iframe {
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }

    .helpButton {
        position: absolute;
        top: -10px;
        right: 0px;
    }
</style>